<template>
  <div>
    <el-button type="primary" @click="addShow">添加</el-button>
    <v-list :roleListData="roleListData" @req="reqRole" :flag="flag" @reqInfo="reqInfo"></v-list>
    <v-form :flag="flag" :reqMenuListData="reqMenuListData" @req="reqRole" ref="form"></v-form>
  </div>
</template>
<script>
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
import { reqmenulist,roleList } from "../../request/api";
export default {
  data() {
    return {
      flag: { isShow: false, isAdd: true },
      reqMenuListData: [],
      roleListData:[],
    };
  },
  props: [],
  components: { vList, vForm },
  methods: {
    //请求菜单列表
    requestList() {
      reqmenulist({ istree: true }).then(res => {
        this.reqMenuListData = res.data.list;
      });
    },
    //请求角色列表
    reqRole(){
      roleList().then(res=>{
        this.roleListData=res.data.list
      })
    },
    addShow() {
      this.flag.isShow = true;
      this.flag.isAdd = true;
    },
    reqInfo(id){
      this.$refs.form.reqInfo(id)
    }
  },
  mounted() {
    this.reqRole()
    this.requestList()
  }
};
</script>
<style lang="less" scoped>
.el-button {
  margin: 20px 0;
}
</style>